<script setup lang="ts">
import { getRecordByOrderNumber } from '@/api/code'
import { reactive } from 'vue'

//接收order_number
const props = defineProps<{
    order_number: string
}>()


// 异常详情
const errorDetail = reactive({
    show: false,
    list: [{
        'id': 20,
        'timestamp': '2024-08-07 00:36:48',
        'user_id': 1,
        'count': 1,
        'order_number': '111',
        'category_id': 1,
        'status': '正常',
        'delete_time': null
    }],
    close() {
        errorDetail.show = false
    },
    open() {
        errorDetail.show = true
    }
})
const lookDetail = () => {
    errorDetail.show = true
    getRecordByOrderNumber(props.order_number).then((res) => {
        console.log(res, 'res')
        errorDetail.list = res
    })
    console.log('查看详情')
}

</script>

<template>
    <view
          style="display: flex;justify-content: right;margin-right: 30rpx;margin-top: 30rpx">
        <text style="color: #2979ff;text-decoration: underline" @click="lookDetail" :under-line="true" disabled>
            详情
            <u-icon name="arrow-right" color="#2979ff" size="24"></u-icon>
        </text>

    </view>
    <view style="height: 50rpx"></view>
    <u-popup
        v-model="errorDetail.show"
        mode="center"
        :round="10"
        @close="errorDetail.close" @open="errorDetail.open"
    >
        <scroll-view style="height: 600rpx" scroll-y>
            <view style="text-align: center;font-size: 40rpx;font-weight: bold">异常记录,共{{errorDetail.list.length}}条</view>
            <view v-for="item in errorDetail.list"
                  style="width: 650rpx;box-sizing: border-box; margin: 10rpx  auto 0;padding: 20rpx; border-radius: 10rpx; box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.5);">

                <view style="margin-top: 20rpx">
                    <view style="display: inline-flex;width: 200rpx">单号</view>
                    <text>{{ item.order_number }}</text>
                </view>
                <view style="margin-top: 20rpx">
                    <view style="display: inline-flex;width: 200rpx">次数</view>
                    <text>{{ item.count }}</text>
                </view>
                <view style="margin-top: 20rpx">
                    <view style="display: inline-flex;width: 200rpx">录入时间</view>
                    <text>{{ item.timestamp }}</text>
                </view>
                <view style="margin-top: 20rpx">
                    <view style="display: inline-flex;width: 200rpx">录入类型</view>
                    <text>{{ item.category_name }}</text>
                </view>
                <view style="margin-top: 20rpx">
                    <view style="display: inline-flex;width: 200rpx">录入人</view>
                    <text>{{ item.real_name }}</text>
                </view>
                <view style="margin-top: 20rpx">
                    <view style="display: inline-flex;width: 200rpx">状态</view>
                    <text :style="{color:item.status === '正常'?'green':'red'}">{{ item.status }}</text>
                </view>
                <view style="height: 50rpx"></view>


            </view>
        </scroll-view>
    </u-popup>
</template>

<style scoped lang="scss">

</style>
